<template>
  <div class="movie-manage">
    <HeimaTable
      :table-data="movieList"
      :columns="columns"
      page
      :page-config="pageConfig"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #search>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input v-model="searchVal" @input="handleInput"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </template>
      <template #operate>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.movie_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </HeimaTable>
  </div>
</template>

<script>
import { getCurrentPageMovie } from '@/api/movie'
import HeimaTable from '@/components/HeimaTable.vue'
import _ from 'lodash'
export default {
  components: {
    HeimaTable
  },
  data () {
    return {
      movieList: [],
      searchVal: '',
      pageConfig: {
        currentPage: 2,
        pageSizes: [10, 20],
        pageSize: 10,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 20
      },
      params: {
        currentPage: 1,
        pageSize: 5,
        input: ''
      },
      columns: [
        {
          label: '编号',
          prop: 'movie_id'
        },
        {
          label: '电影名称',
          prop: 'name'
        },
        {
          label: '主演',
          prop: 'actor'
        },
        {
          label: '导演',
          prop: 'director'
        },
        {
          label: '上映日期',
          prop: 'public_date'
        }
      ]
    }
  },
  created () {
    this.initData()
    // 将用debounce函数调用之后返回的函数，放到一个新的变量handleInput中，那么这个handleInput就具有防抖功能了
    this.handleInput = _.debounce(this.handleChange, 300)
  },
  methods: {
    // _.debounce(this.handleChange, 300)
    handleChange () {
      console.log('搜索请求')
    },
    async initData () {
      const res = await getCurrentPageMovie(this.params)
      console.log(res)
      this.movieList = res.data.data
      this.pageConfig.total = res.data.total
    },
    handleEdit (row) {
      console.log(row)
    },
    handleDelete (id) {
      console.log(id)
    },
    handleSizeChange (v) {
      console.log(v)
      this.params.pageSize = v
      this.initData()
    },
    handleCurrentChange (v) {
      console.log(v)
      this.params.currentPage = v
      this.initData()
    }
  }
}
</script>

<style>
</style>
